<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Tracked Controllers Example — Networked-Aframe</title>
    <meta name="description" content="Tracked Controllers — Networked-Aframe" />

    <script src="https://aframe.io/releases/1.7.0/aframe.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.8.1/socket.io.min.js"></script>
    <script src="/easyrtc/easyrtc.js"></script>
    <script src="/dist/networked-aframe.js"></script>

    <script src="https://cdn.jsdelivr.net/gh/c-frame/aframe-extras@7.5.4/dist/aframe-extras.controls.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/aframe-environment-component@1.5.0/dist/aframe-environment-component.min.js"></script>
    <script src="/js/spawn-in-circle.component.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/aframe-randomizer-components@3.0.2/dist/aframe-randomizer-components.min.js"></script>

    <script>
      // Temporary workaround for template declaration; see issue 167
      NAF.schemas.getComponentsOriginal = NAF.schemas.getComponents;
      NAF.schemas.getComponents = (template) => {
        if (!NAF.schemas.hasTemplate('#head-template')) {
          NAF.schemas.add({
            template: '#head-template',
            components: [
              {
                component: 'position',
                requiresNetworkUpdate: NAF.utils.vectorRequiresUpdate(0.001)
              },
              {
                component: 'rotation',
                requiresNetworkUpdate: NAF.utils.vectorRequiresUpdate(0.5)
              },
              {
                selector: '.head',
                component: 'material',
                property: 'color'
              }
            ]
          });
        }

        if (!NAF.schemas.hasTemplate('#rig-template')) {
          NAF.schemas.add({
            template: '#rig-template',
            components: [
              {
                component: 'position',
                requiresNetworkUpdate: NAF.utils.vectorRequiresUpdate(0.001)
              },
              {
                component: 'rotation',
                requiresNetworkUpdate: NAF.utils.vectorRequiresUpdate(0.5)
              }
            ]
          });
        }

        const components = NAF.schemas.getComponentsOriginal(template);
        return components;
      };
    </script>
  </head>

  <body>
    <a-scene
      networked-scene="
        room: handcontrollers;
        debug: true;
        adapter: wseasyrtc;
    "
    >
      <a-assets>
        <template id="rig-template">
          <a-entity></a-entity>
        </template>

        <template id="head-template">
          <a-entity class="avatar">
            <a-sphere class="head" scale="0.2 0.22 0.2" random-color></a-sphere>
            <a-entity class="face" position="0 0.05 0">
              <a-sphere class="eye" color="white" position="0.06 0.05 -0.16" scale="0.04 0.04 0.04">
                <a-sphere class="pupil" color="black" position="0 0 -1" scale="0.2 0.2 0.2"></a-sphere>
              </a-sphere>
              <a-sphere class="eye" color="white" position="-0.06 0.05 -0.16" scale="0.04 0.04 0.04">
                <a-sphere class="pupil" color="black" position="0 0 -1" scale="0.2 0.2 0.2"></a-sphere>
              </a-sphere>
            </a-entity>
          </a-entity>
        </template>
      </a-assets>

      <a-entity environment="preset:arches"></a-entity>

      <a-entity id="rig" movement-controls="fly:true;" spawn-in-circle="radius:3" networked="template:#rig-template;">
        <a-entity
          id="player"
          camera
          position="0 1.6 0"
          look-controls
          networked="template:#head-template;"
          visible="false"
        >
        </a-entity>
        <!-- here we add the user's local hands! These two entities are all that is needed. -->
        <a-entity
          id="my-tracked-left-hand"
          networked-hand-controls="hand:left;color:gold;"
          networked="template:#left-hand-default-template"
        ></a-entity>
        <a-entity
          id="my-tracked-right-hand"
          networked-hand-controls="hand:right;handModelStyle:controller;"
          networked="template:#right-hand-default-template"
        ></a-entity>
      </a-entity>
    </a-scene>
  </body>
</html>
